@if (memberService.member(); as member) {
<div class="flex flex-col gap-3">
    <div class="flex gap-3">
        <span class="font-semibold">Member since:</span>
        <span>{{member.created | date: 'longDate'}}</span>
    </div>
    <div class="flex gap-3">
        <span class="font-semibold">Last active:</span>
        <span>{{member.lastActive | timeAgo }}</span>
    </div>
    <h3 class="text-lg font-semibold text-primary">About {{member.displayName}}</h3>
    @if (memberService.editMode()) {
    <form #editForm="ngForm" (ngSubmit)="updateProfile()" class="flex flex-col w-full gap-4">
        <label class="floating-label">
            <span>Display Name</span>
            <input 
                class="input w-full"
                name="displayName" 
                [(ngModel)]="editableMember.displayName" 
                placeholder="Display name">
        </label>
        <label class="floating-label">
            <span>Description</span>
            <textarea 
                class="textarea w-full"
                name="description" 
                [(ngModel)]="editableMember.description" 
                placeholder="Description"></textarea>
        </label>
        <label class="floating-label">
            <span>City</span>
            <input 
                class="input w-full"
                name="city" 
                [(ngModel)]="editableMember.city" 
                placeholder="City">
        </label>
        <label class="floating-label">
            <span>Country</span>
            <input 
                class="input w-full"
                name="country" 
                [(ngModel)]="editableMember.country" 
                placeholder="Country">
        </label>
        <div class="flex self-end">
            <button [disabled]="!editForm.dirty" type="submit" class="btn btn-success">Submit</button>
        </div>
    </form>
    } @else {
    <div>{{member.description || 'No description provided yet'}}</div>
    }

</div>
}